<template>
	<div>
		<div v-if="item">
			<van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.back()" />

			<div>
				<img :src="item.url" alt="" style="width: 100%">
				<h3>{{ item.title }}</h3>
				<p>{{ item.desc }}</p>
				<div>
					<h3>折扣: {{ item.discount / 10 }}</h3>
					<b style="color: red;margin-right: 10px;">￥：{{ item.price * item.discount / 100 }}</b>
					<b style="text-decoration: line-through;color: #ccc">￥：{{ item.price }}</b>
				</div>
			</div>

			<!-- 评论 -->
			<div class="message">
				<h2>用户评论</h2>
				<ul>
					<li v-for="v in item.message" :key="v.id">
						<img :src="v.avator" alt="">
						<div>
							<p>
								<span>{{ v.nickname }}</span>
								<span>{{ v.createTime }}</span>
							</p>
							<p>{{ v.content }}</p>
						</div>
					</li>
				</ul>
			</div>

			<van-action-bar placeholder>
				<van-action-bar-icon icon="chat-o" text="客服" />
				<van-action-bar-icon icon="cart-o" text="购物车" />
				<van-action-bar-icon icon="shop-o" text="店铺" />
				<van-action-bar-button type="danger" text="立即购买" @click="addCar"/>
			</van-action-bar>
		</div>
		<div v-else>数据拼命加载中...</div>
	</div>
</template>


<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue'
import { fetchListDetail } from '@/api'
import { Notify } from 'vant'
import { useRouter } from 'vue-router'
import { ListItem } from '../home/types'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()
const props = defineProps(['id'])
const item = ref<ListItem | null>(null)

const addCar = () => {
	store.commit('addCar', item.value)
}

onMounted(() => {
	(async () => {
		const resp = await fetchListDetail(props.id)
		const { code, data, message } = resp.data;
		if (code === 200) {
			item.value = data
		} else {
			Notify({
				type: 'danger', message, onClose() {
					router.back()
				}
			});
		}
	})()
})


</script>

<style lang="scss" scoped>
.message {
	ul {
		li {
			display: flex;
			height: 80px;
			align-items: center;

			img {
				border-radius: 50%;
				width: 50px;
				height: 50px;
				margin: 0 10px;
			}

			div {
				flex: 1;

				p {
					&:first-child {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
}
</style>